<template>
  <div>
    <div>
      <hr />
      <h1>我是儿子</h1>
      <br />
      <el-button type="danger" @click="change">改变</el-button>
      <br />
      <h1>{{ name }}</h1>
      <h1>{{person.name}}</h1>
      <h1>{{person.nickName}}</h1>
      <br />
      <el-button type="danger" @click="changeObj">改变</el-button>
    </div>
    <Sunzi />
  </div>
</template>

<script>
import Sunzi from './sunzi.vue'
import { reactive, ref, toRefs } from 'vue'
export default {
  components: {
    Sunzi,
  },
  props: ['msg'],
  setup(props) {
    const name = ref(props.msg)
    const person = reactive({
      name: '康熙',
      nickName: '皇上',
    })
    let change = () => {
      name.value = '哈哈哈哈哈'
    }

    let changeObj = () => {
      person.name = '宣统'
    }

    return { name, change, changeObj, person }
  },
  data() {
    return {}
  },
}
</script>

<style scoped>
</style>